<template>
    <div class="main">
      <el-table
        :data="stores"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column lable="头像" width="120">
          <template slot-scope="scope">  <!-- 使用template 标签表示把当前对象定义出来 包含行的对象所以 要访问值需要访问row属性-->
            <img :src="getImgUrl(scope.row.stimg)" style="width: 30px;height: 30px"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="stno"
          label="编号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="stname"
          label="名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="stphone"
          label="联系电话"
          width="100">
        </el-table-column>
        <el-table-column
          prop="stemail"
          label="邮箱"
          width="100" >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEditStore(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteStore(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next, jumper"
          :total="pageInfo.itemCount">
        </el-pagination>
      </div>
      <el-button size="mini" @click="handleAddStore">
        新增
      </el-button>
      <addStore v-if="addDialogIsShow" ref="showAddStore"></addStore>
      <editStore v-if="editDialogIsShow" ref="showEditStore"></editStore>

    </div>
</template>

<script>
  import api from "../../../../axios/api"
 import addStore from '@/components/back/store/addStore.vue'
  import editStore from '@/components/back/store/editStore.vue'
    export default {
        name: "index",
        addDialogIsShow:false,
        editDialogIsShow:false,
      components:{
      addStore,editStore
      },
      data(){
          return {
            stores:[],
            addDialogIsShow:false,
            editDialogIsShow:false,
            currentPage: 1,
            pageInfo:{},
          }
      },
      methods: {
        handleSizeChange(val) {
          //console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          //console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.setDataFromAxios(val);
        },
        getImgUrl: function (imgsrc) {
          return  this.$store.state.host + "/upload/images/store/" + imgsrc;
        },
        tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2 == 0) {
            return 'warning-row';
          } else {
            return '';
          }
          return '';
        },
        setDataFromAxios: function (currPage) {
          if(currPage!=null){
            this.currentPage = currPage;
          }
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面storeController/getStoreByPage?currPage=1&pageSize=3
          api.setDataFromAxios("/api/storeController/getStoreByPage?currPage="+this.currentPage+"&pageSize=5", null, "post")
            .then(res => {
              console.log(res)
              this.stores = res.tList;
              this.pageInfo = res.obj;
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },
        handleEditStore:function(index,store){
         // console.log(index + "   "+ store.stno);
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.editDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showEditStore.init(store);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddStore）调用子组件的init方法
          })
        },
        handleDeleteStore:function(index,store){
          //console.log(index + "   "+ row.stno);
            api.setDataFromAxios( "/api/storeController/deleteStoreByStno/"+store.stno, this.stores, "post")
          alert(store.stno+"删除成功");
        },
        handleAddStore:function(){
          let _this = this;   //this代表方法调用者 this代表vue对象
          _this.addDialogIsShow = true;
          _this.$nextTick(() => {  //下一步操作
            _this.$refs.showAddStore.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddStore）调用子组件的init方法
          })
        },
      },
      created:function () {
        this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
      }
    }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto
  /deep/ .warning-row  /*不写deep渲染出错*/
    background-color oldlace
</style>
